document.addEventListener('DOMContentLoaded', function() {
    const chatContainer = document.getElementById('chatContainer');
    const userInput = document.getElementById('userInput');
    const sendButton = document.getElementById('sendButton');
    const uploadButton = document.getElementById('uploadButton');
    const fileInput = document.getElementById('fileInput');
    const imagePreviewContainer = document.getElementById('imagePreviewContainer');
    const imagePreview = document.getElementById('imagePreview');
    const removeImageBtn = document.getElementById('removeImageBtn');
    const clearHistoryBtn = document.getElementById('clearHistoryBtn');
    
    // 当前上传的图片URL（如果有）
    let currentUploadedImageUrl = null;
    
    // 配置Marked.js选项
    marked.setOptions({
        highlight: function(code, lang) {
            if (lang && hljs.getLanguage(lang)) {
                try {
                    return hljs.highlight(code, { language: lang }).value;
                } catch (e) {}
            }
            return hljs.highlightAuto(code).value;
        },
        breaks: true,        // 启用换行
        gfm: true,           // 启用GitHub风格Markdown
        headerIds: true,     // 为标题生成ID
        mangle: false,       // 不转义标题文本
        sanitize: false      // 输出HTML (由DOMPurify处理)
    });
    
    // 添加欢迎消息
    addMessage('欢迎使用AI聊天助手！请输入您的问题或上传图片。', 'ai');
    
    // 自动调整文本框高度
    userInput.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });
    
    // 发送消息按钮点击事件
    sendButton.addEventListener('click', sendMessage);
    
    // 监听回车键，但不触发提交（仅用于换行）
    userInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault(); // 阻止默认的回车提交行为
            // 不调用sendMessage，而是插入换行符
            const start = this.selectionStart;
            const end = this.selectionEnd;
            const value = this.value;
            this.value = value.substring(0, start) + '\n' + value.substring(end);
            this.selectionStart = this.selectionEnd = start + 1;
            // 触发input事件以调整高度
            this.dispatchEvent(new Event('input'));
        }
    });
    
    // 清除历史按钮点击事件
    clearHistoryBtn.addEventListener('click', function() {
        if (confirm('确定要清除所有对话历史吗？')) {
            fetch('/clear-history', {
                method: 'POST',
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 清空聊天容器
                    chatContainer.innerHTML = '';
                    // 添加新的欢迎消息
                    addMessage('对话历史已清除。请开始新的对话！', 'ai');
                }
            })
            .catch(error => {
                console.error('清除历史失败:', error);
            });
        }
    });
    
    // 上传按钮点击事件
    uploadButton.addEventListener('click', function() {
        fileInput.click();
    });
    
    // 文件选择变化事件
    fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            // 检查文件类型
            const file = this.files[0];
            if (!file.type.startsWith('image/')) {
                alert('请选择图片文件');
                this.value = '';
                return;
            }
            
            // 检查文件大小
            if (file.size > 16 * 1024 * 1024) {
                alert('图片大小不能超过16MB');
                this.value = '';
                return;
            }
            
            // 创建FormData对象并添加文件
            const formData = new FormData();
            formData.append('file', file);
            
            // 显示上传中提示
            imagePreview.src = '';
            imagePreviewContainer.classList.remove('d-none');
            imagePreview.alt = '上传中...';
            
            // 发送上传请求
            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 显示预览
                    imagePreview.src = data.file_url;
                    imagePreview.alt = data.filename;
                    imagePreviewContainer.classList.remove('d-none');
                    currentUploadedImageUrl = data.file_url;
                } else {
                    alert(data.error || '上传失败');
                    imagePreviewContainer.classList.add('d-none');
                    currentUploadedImageUrl = null;
                }
            })
            .catch(error => {
                console.error('上传出错:', error);
                alert('上传失败，请重试');
                imagePreviewContainer.classList.add('d-none');
                currentUploadedImageUrl = null;
            });
            
            // 清除文件输入，以便可以再次选择同一文件
            this.value = '';
        }
    });
    
    // 移除图片按钮点击事件
    removeImageBtn.addEventListener('click', function() {
        imagePreviewContainer.classList.add('d-none');
        imagePreview.src = '';
        currentUploadedImageUrl = null;
    });
    
    // 发送消息函数
    function sendMessage() {
        const message = userInput.value.trim();
        if (!message && !currentUploadedImageUrl) return;
        
        // 添加用户消息到聊天区域
        addMessage(message, 'user', currentUploadedImageUrl);
        
        // 清空输入框并重置高度
        userInput.value = '';
        userInput.style.height = 'auto';
        
        // 显示"AI正在输入"的提示
        const aiTypingContainer = document.createElement('div');
        aiTypingContainer.className = 'message-container';
        const aiTypingMessage = document.createElement('div');
        aiTypingMessage.className = 'message ai-message ai-typing';
        aiTypingMessage.innerHTML = '<span class="typing-indicator">AI正在思考...</span>';
        aiTypingContainer.appendChild(aiTypingMessage);
        chatContainer.appendChild(aiTypingContainer);
        
        // 滚动到底部
        scrollToBottom();
        
        // 发送请求到服务器
        const formData = new FormData();
        formData.append('message', message);
        
        // 如果有图片，添加图片URL
        if (currentUploadedImageUrl) {
            formData.append('image_url', currentUploadedImageUrl);
            // 清除当前图片
            imagePreviewContainer.classList.add('d-none');
            imagePreview.src = '';
            const tempImageUrl = currentUploadedImageUrl;
            currentUploadedImageUrl = null;
        }
        
        // 先尝试连接正常API
        sendChatRequest('/chat', formData).catch(error => {
            console.error('正常API调用失败，尝试使用模拟聊天:', error);
            // 如果正常API失败，尝试使用模拟聊天
            return sendChatRequest('/chat/mock', formData);
        }).catch(error => {
            console.error('所有聊天API都失败:', error);
            // 删除"AI正在输入"的提示
            removeTypingIndicator();
            // 显示错误消息
            addMessage('抱歉，发生了错误，请稍后再试。', 'ai');
        });
    }
    
    // 发送聊天请求并处理响应
    function sendChatRequest(url, formData) {
        return new Promise((resolve, reject) => {
            fetch(url, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                
                // 创建AI回复的消息容器
                const aiContainer = document.createElement('div');
                aiContainer.className = 'message-container';
                const aiMessage = document.createElement('div');
                aiMessage.className = 'message ai-message';
                
                // 添加Markdown内容容器
                const markdownContent = document.createElement('div');
                markdownContent.className = 'markdown-content';
                aiMessage.appendChild(markdownContent);
                
                aiContainer.appendChild(aiMessage);
                
                // 删除"AI正在输入"的提示
                removeTypingIndicator();
                
                // 添加AI消息容器到聊天区域
                chatContainer.appendChild(aiContainer);
                
                // 处理流式响应
                const reader = response.body.getReader();
                const decoder = new TextDecoder('utf-8');
                
                // 存储完整响应文本
                let fullResponse = '';
                
                return new ReadableStream({
                    start(controller) {
                        function push() {
                            reader.read().then(({ done, value }) => {
                                if (done) {
                                    controller.close();
                                    
                                    // 在流结束时渲染Markdown
                                    if (fullResponse.trim()) {
                                        renderMarkdown(markdownContent, fullResponse);
                                    }
                                    
                                    resolve();
                                    return;
                                }
                                
                                try {
                                    const text = decoder.decode(value, { stream: true });
                                    fullResponse += text;
                                    
                                    // 实时渲染Markdown
                                    renderMarkdown(markdownContent, fullResponse);
                                    
                                    scrollToBottom();
                                } catch (e) {
                                    console.error('解码响应时出错:', e);
                                    markdownContent.innerHTML += `<span class="text-danger">[解码错误]</span>`;
                                }
                                
                                push();
                            }).catch(error => {
                                console.error('读取流时出错:', error);
                                reject(error);
                            });
                        }
                        
                        push();
                    }
                });
            })
            .catch(error => {
                console.error('请求失败:', error);
                reject(error);
            });
        });
    }
    
    // 渲染Markdown内容
    function renderMarkdown(container, text) {
        try {
            // 使用Marked解析Markdown
            const rawHtml = marked.parse(text);
            
            // 使用DOMPurify清理HTML，防止XSS攻击
            const cleanHtml = DOMPurify.sanitize(rawHtml);
            
            // 更新容器内容
            container.innerHTML = cleanHtml;
            
            // 查找并高亮代码块
            container.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightElement(block);
            });
        } catch (e) {
            console.error('Markdown渲染出错:', e);
            container.textContent = text;
        }
    }
    
    // 删除"AI正在输入"的提示
    function removeTypingIndicator() {
        const typingIndicator = document.querySelector('.ai-typing');
        if (typingIndicator && typingIndicator.parentElement) {
            typingIndicator.parentElement.remove();
        }
    }
    
    // 添加消息到聊天区域
    function addMessage(text, sender, imageUrl = null) {
        const messageContainer = document.createElement('div');
        messageContainer.className = 'message-container ' + (sender === 'user' ? 'user' : '');
        
        const messageElement = document.createElement('div');
        messageElement.className = 'message ' + (sender === 'user' ? 'user-message' : 'ai-message');
        
        if (sender === 'user') {
            // 用户消息简单处理，不需要Markdown
            const formattedText = text
                .replace(/\n/g, '<br>')
                .replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank">$1</a>');
            
            messageElement.innerHTML = formattedText;
            
            // 如果有图片，添加图片预览
            if (imageUrl) {
                const imageElement = document.createElement('img');
                imageElement.src = imageUrl;
                imageElement.alt = '用户上传图片';
                imageElement.className = 'user-uploaded-image';
                messageElement.appendChild(imageElement);
            }
        } else {
            // AI消息使用Markdown渲染
            const markdownContent = document.createElement('div');
            markdownContent.className = 'markdown-content';
            messageElement.appendChild(markdownContent);
            
            // 渲染Markdown内容
            renderMarkdown(markdownContent, text);
        }
        
        messageContainer.appendChild(messageElement);
        chatContainer.appendChild(messageContainer);
        
        scrollToBottom();
    }
    
    // 滚动到聊天区域底部
    function scrollToBottom() {
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
}); 